<template>
  <div>
    <div v-for="(item, index) in list" :key="index">
      {{ item }}
    </div>
    <h1 ref="hong">{{ obj.name }}</h1>
    <button @click="add">触发</button>
    <button @click="del">删除</button>
    <div id="box"></div>
    <div id="con"></div>
    <hr />
    <my-render></my-render>
  </div>
</template>

<script>
import Vue from 'vue'
// $nextick dom加载完毕后执行回调函数
import myRender from './myrender.vue'
// Vue.extend 可以封装一个Vue组件类
//可以实例化 组件 传递props 挂载使用
const myCar = Vue.extend({
  template: `<div @click="say">{{kk}}{{msg}}</div>`,
  data () {
    return {
      kk: '你好'
    }
  },
  methods: {
    say () {
      alert(1)
    }
  },
  props: ['msg']
})

export default {
  data () {
    return {
      list: ['古力娜扎', '马尔扎哈', '热巴'],
      obj: {
        name: '小红',
        age: 20
      }
    }
  },
  components: { myRender },
  created () {
    this.$nextTick(() => {
      var hong = this.$refs.hong
      console.log(hong)
    })
  },
  mounted () {
    new myCar({ propsData: { msg: '裤里难' }, el: '#con' })
    new myCar({ propsData: { msg: '奔驰迈巴赫' }, el: '#box' })
  },
  methods: {
    add () {
      // this.list[2] = '洪金宝' //无法响应修改页面
      this.$set(this.list, 2, '洪金宝')
      this.obj.name = '小利'
      this.$set(this.obj, 'name', '小孙')

      //
      this.$nextTick(() => {
        var ho = this.$refs.hong
        console.log(ho.innerHTML)
      })
    },
    del () {
      // 删除 vue数据  数组和对象的数据
      this.$delete(this.list, 1)
    }
  }
}
</script>
<style lang="less"></style>
